<template>
  <el-dialog
    v-model="centerDialogVisible"
    :title="t('dbms.microservices.configTitle')"
    align-center
    width="90%"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <WsmTable
      ref="table"
      v-model="queryFormType"
      load-url="/dbms-server/base/appconfig/page"
      :change-load="true"
      :select="true"
    >
      <template #title>{{ t('dbms.microservices.configTitle') }}</template>
      <template #query="{ data }">
        <el-form-item :label="t('dbms.microservices.config.activity')">
          <el-radio-group v-model="data.activity.value">
            <el-radio value="">{{ t('dbms.microservices.config.all') }}</el-radio>
            <el-radio value="0">{{ t('dbms.microservices.config.disable') }}</el-radio>
            <el-radio value="1">{{ t('dbms.microservices.config.enable') }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </template>
      <template #button="{ row }">
        <el-button type="primary" v-hasPermi="'addConfig'" @click="addForm.show()">{{
          t('common.add')
        }}</el-button>
        <el-button v-hasPermi="'updateConfig'" v-if="row" @click="update(row.id)" type="success">{{
          t('common.update')
        }}</el-button>
        <el-button @click="del(row.id)" v-if="row" v-hasPermi="'deleteConfig'" type="danger">{{
          t('common.delete')
        }}</el-button>
        <el-button @click="active(row.id)" v-if="row" v-hasPermi="'active'" type="warning">{{
          t('dbms.microservices.config.enableReStart')
        }}</el-button>
      </template>
      <template #column>
        <el-table-column prop="appType" :label="t('dbms.microservices.config.activity')" width="70">
          <template #default="scope">
            <template v-if="scope.row.activity === 0">
              <el-tag effect="dark" type="danger">{{
                t('dbms.microservices.config.disable')
              }}</el-tag>
            </template>
            <template v-else-if="scope.row.activity === 1">
              <el-tag effect="dark" type="success">{{
                t('dbms.microservices.config.enable')
              }}</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="docType"
          :label="t('dbms.microservices.config.docType')"
          width="100"
        />
        <el-table-column
          prop="appName"
          :label="t('dbms.microservices.config.appName')"
          width="250"
        />
        <el-table-column prop="configName" :label="t('dbms.microservices.config.configName')" />
      </template>
    </WsmTable>
    <WsmForm
      ref="addForm"
      v-model="addFormData"
      submit-url="/dbms-server/base/appconfig/add"
      :init-data="initData"
      label-width="100px"
      :title="t('dbms.microservices.config.addTitle')"
      @success="flushed"
    >
      <template #default="{ form }">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="configName" :label="t('dbms.microservices.config.configName')">
              <el-input
                v-model="form.configName"
                :placeholder="t('dbms.microservices.config.configName')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="docType" :label="t('dbms.microservices.config.docType')">
              <el-radio-group v-model="form.docType">
                <el-radio value="yml">yml</el-radio>
                <el-radio value="properties">properties</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="configValue" :label="t('dbms.microservices.config.configValue')">
              <CodeInput
                v-model="form.configValue"
                :code-style="{ height: '400px', width: '100%' }"
                code="yaml"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </WsmForm>

    <WsmForm
      ref="updateForm"
      v-model="updateData"
      load-url="/dbms-server/base/appconfig/get"
      submit-url="/dbms-server/base/appconfig/update"
      label-width="100px"
      :title="t('dbms.microservices.config.updateTitle')"
      @success="flushed"
    >
      <template #default="{ form }">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="configName" :label="t('dbms.microservices.config.configName')">
              <el-input
                v-model="form.configName"
                :placeholder="t('dbms.microservices.config.configName')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="docType" :label="t('dbms.microservices.config.docType')">
              <el-radio-group v-model="form.docType">
                <el-radio value="yml">yml</el-radio>
                <el-radio value="properties">properties</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="configValue" :label="t('dbms.microservices.config.configValue')">
              <CodeInput
                v-model="form.configValue"
                :code-style="{ height: '400px', width: '100%' }"
                code="yaml"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </WsmForm>
    <UploadConfig ref="uploadConfig" />
  </el-dialog>
</template>
<script setup lang="ts">
import { WsmTable } from '@/components/WsmTable'
import { WsmForm } from '@/components/WsmForm'
import { delApi } from '@/api/dbms/appconfig'
import { FormDataType } from '@/components/WsmForm/src/types'
import { QueryFormType, QueryType } from '@/components/WsmTable/src/types'
import { useI18n } from '@/hooks/web/useI18n'
import { ElMessageBox } from 'element-plus'
import { ref } from 'vue'
import { CodeInput } from '@/components/CodeMirror'
import UploadConfig from './UploadConfig.vue'

const centerDialogVisible = ref(false)

const { t } = useI18n()

//表格对象
const table = ref()

//新增表单对象
const addForm = ref()
const initData = ref({
  appName: '',
  docType: 'properties',
  activity: '0'
})

const addFormData: FormDataType = {
  appName: '',
  configName: '',
  configValue: '',
  docType: '',
  activity: '0'
}

//修改表单对象
const updateForm = ref()
const updateData: FormDataType = {
  id: '',
  appName: '',
  configName: '',
  configValue: '',
  docType: '',
  activity: 0
}

const queryFormType: QueryFormType = {
  appName: {
    value: '',
    clear: false,
    queryType: QueryType.EQ
  },
  activity: {
    value: '',
    queryType: QueryType.EQ
  }
}

const update = (id: string) => {
  updateForm.value.show({ id })
}

const del = async (id: string) => {
  ElMessageBox.confirm(t('common.delMessage'), t('common.delWarning'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(async () => {
    const rs = await delApi({ id })
    if (rs.success) {
      table.value.load(1)
    }
  })
}

const uploadConfig = ref()

const active = async (id: string) => {
  uploadConfig.value.show(id, queryFormType.appName.value)
}
const flushed = () => {
  table.value.load(1)
}

const show = (appName: string) => {
  queryFormType.appName.value = appName
  initData.value.appName = appName
  centerDialogVisible.value = true
}

//关闭表单
const hide = () => {
  centerDialogVisible.value = false
}

//暴露方法
defineExpose({ show, hide })
</script>
